<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>组件基础-单个根元素</title>
</head>
<body>


<div id="app">
	<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
   v-bind:post="post">
  </blog-post>
</div>

<script type="text/javascript">
	
// 定义一个名为 button-counter 的新组件

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
      <h2>{{post.content}}</h2>
    </div>
  `
})



var app=new Vue({
  el: '#app',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue',content:'content-1' },
      { id: 2, title: 'Blogging with Vue',content:'content-2' },
      { id: 3, title: 'Why Vue is so fun',content:'content-3' }
    ]
  }
})

</script>

</body>
</html>